<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"></meta>
    <title>Lightly-HTML-Project</title>
    <style>
        *{
            font-style: normal;
            padding: 0;
            margin: 0;
            font-weight: 400;
        }
        .right_top_detail_important{
            font-family: 'Overpass';
            font-weight: 800;
            font-size: 8pt;
            line-height: 10pt;
        }
        .right_top_detail{
            font-family: 'Overpass';
            font-size: 8pt;
            line-height: 10pt;
        }
        .invoice_title{
            display: block;
            margin-top: 30px;
            font-family: 'Overpass Black';
            font-size: 16pt;
            width: 100%;
            font-weight:800;
            text-align: left;
            height: 24px;
            line-height: 15px;

        }
        .invoice_list{
            line-height: 8pt;
            font-family: 'Overpass';
            font-weight: 500;
            font-size: 8pt;
        }
        .invoice_list_col{
            display: inline-block;
            width: 48%;
            box-sizing: border-box;
            vertical-align: text-top;
        }
        .invoice_list_col_item{
            line-height: 15px;
        }
        .invoice_list_col_item > div{
            width: 48%;
            display: inline-block;
            box-sizing: border-box;
            vertical-align: text-top;
        }
        .table_title{
            font-family: 'Overpass Black';
            height: 41px;
            background:#FFF101;
            font-weight: 900;
            text-align: left;
            font-size: 8pt;
            line-height: 15px;
        }
        .table{
            table-layout: fixed;
            width:100%;
            padding-right: 33px;
            border-collapse:collapse;
            border-bottom:2px solid #FFF101;
        }
        .table_title th{
            width: 13%;
            box-sizing: border-box;
            padding: 0 4px;
        }
        .table_title th:first-child{
            width: 15%;
        }
        .table_title th:nth-child(3){
            width: 18%;
        }
        .table_value td{
            width: 13%;
            box-sizing: border-box;
            padding: 0 4px;
            word-break:break-word;
        }
        .table_value td:first-child{
            width: 15%;
        }
        .table_value td:nth-child(2){
            word-wrap: break-word;
        }
        .table_value td:nth-child(3){
            width: 18%;
        }
        .table_footer{
            width: 25%;
            float: right;
            margin-right: 33px;
        }
        .table_sub_title{
            font-family: 'Overpass';
            width:46%;
            font-weight:800;
            font-size: 8pt;
            box-sizing: border-box;
            padding: 0 4px;
            /* display: inline-block; */
            float: left;

        }
        .table_sub_value{
            font-family: 'Overpass';
            width: 50%;
            display: inline-block;
            box-sizing: border-box;
            font-size: 8pt;
            padding: 0 6px;
            word-break: break-all;
            height: inherit;
            vertical-align: sub;
        }
        .table_value{
            font-family: 'Overpass';
            font-size: 8pt;
        }
        .footer_comment{
            font-family: 'Overpass';
            font-size: 8pt;
            line-height: 30px;
            margin-top: 295px;
        }
        #customerInfo{
            display: inline-block;

        }
        .bottom_text {
            width: 100%;
            position: absolute;
            bottom: 15px;
            left: 0px;
            box-sizing: border-box;
            padding: 0 0px;
        }
        @page {
            size: 210mm 297mm; /*设置纸张大小:A4(210mm 297mm)、A3(297mm 420mm) 横向则反过来*/
            margin-bottom: 1.2in;
            padding-bottom: 0;
            overflow: visible;
            line-height:10px;
            /*margin-left: 0;*/
            padding-left: 0;
            margin-right: 9px;
            padding-right: 0px;
            margin-top: 316px;
            padding-top: 0;
            @bottom-left {
                width: 400px;
                white-space: normal;
                word-break: break-all;
                font-family: 'Overpass';
                font-size: 8pt;
                line-height: 10pt;
                color: #727272;
                position: absolute;
                content: "REGISTERED OFFICE: ${registeredOffice}\AVAT REG NO.: ${vatRegNo} -IBAN: ${iban} BIC: ${bic}";
                white-space: pre;
                vertical-align: bottom;
                padding-bottom: 10px;
            };
            @bottom-right {
                padding-right: 20px;
                font-size: 8pt;
                font-family: 'Overpass';
                content: "P." counter(page) "/" counter(pages);
                background: transparent;
                margin-left: 20px;
                padding-bottom: 40px;
            };
            @top-right-corner {
                /*border-right: 20px solid #FFF101;*/
                width: 20px;
                background: #FFF101;

            };
            @right-top {
                /*border-right: 9px solid #FFF101;*/
                background: #FFF101;
                width: 9px;
            };
            @right-middle {
                /*border-right: 9px solid #FFF101;*/
                background: #FFF101;
                width: 9px;
            };
            @bottom-right-corner {
                /*border-right: 9px solid #FFF101;*/
                width: 9px;
                background: #FFF101;
            };
            @top-left {
                /*content: "11111";*/
                /*border: 2px solid blue;*/
                background-image: url();
                background-repeat: no-repeat;
                background-size: 63px 63px;
                background-position: 0px 40px;
                content: element(tableTitleLeft);
                padding-top: 200px;
                width: 137mm;
            }
            @top-right {
                text-align: left;
                height: 140px;
                /*content: '${company}\A ${street}\A ${city}${province}\A ${country}\A t +${areaCode} ${telephone}\A f +${faxAreaCode} ${faxNumber}\A info@lotuscars.nl\A lotuscars.com';*/
                white-space: pre;
                content: element(customerInfo);
                /*line-height: 20px;*/
                /*border: 2px solid green;*/
                /*width: 25%;*/
                font-family: 'Overpass';
                font-size: 8pt;
                position: relative;
                vertical-align: top;
            }
        }
        #customerInfo{
            position:running(customerInfo);
            height: 100%;
            margin-top: 40px;
            /*border: 2px solid red;*/

        }
        #customerInfoFirst{
            position: running(customerInfoFirst);
            margin-left: 80px;
        }
        #tableTitleLeft{
            position: running(tableTitleLeft);
            width: 137mm;

        }
        #tableTitleLeft .tableTitleLeft_div{
            background: #FFF101;
            width: 100%;
            border: 1px solid #FFF101;
        }
        #tableTitleLeft .tableTitleLeft_div>div{
            font-family: 'Overpass Black';
            height: 40px;
            font-size: 8pt;
            background:#FFF101;
            font-weight: 900;
            box-sizing: border-box;
            float: left;
            padding: 0 4px;
            text-align: left;
            line-height: 40px;
        }
        #tableTitleLeft .tableTitleLeft_div>div:nth-child(1){
            width: 18%;
        }
        #tableTitleLeft .tableTitleLeft_div>div:nth-child(2){
            width: 18%;
        }
        #tableTitleLeft .tableTitleLeft_div>div:nth-child(3){
            width: 23%;
            line-height: 15px;
            vertical-align: bottom;
        }
        #tableTitleLeft .tableTitleLeft_div>div:nth-child(3)>div{
            margin-top: 4pt;
        }
        #tableTitleLeft .tableTitleLeft_div>div:nth-child(4){
            width: 16%;
        }
        #tableTitleLeft .tableTitleLeft_div>div:nth-child(5){
            width: 17%;
            padding-left: 4px;
            border-right: 1px solid #FFF101;
        }
        #tableTitleRight{
            position: absolute;
            width: 75mm;
            left: 0;
            /*border: 2px solid red;*/
        }
        #tableTitleRight>div{
            display: inline-block;
            font-family: 'Overpass Black';
            height: 41px;
            background:#FFF101;
            font-weight: 900;
            padding:0 4px;
            margin-top: 128px;
            box-sizing: border-box;
            width: 30%;
            /*margin: 0;*/
            float: left;
            text-align: left;
            line-height: 40px;
            font-size: 8pt;
        }

        @page:first {
            margin-top: 200px;
            @top-right {
                content: element(customerInfoFirst);
            }
            @top-left {
                /*content: "11111";*/
                /*border: 2px solid blue;*/
                background-image: url();
                background-repeat: no-repeat;
                background-size: 63px 63px;
                background-position: 0px 40px;
                width: 135mm;
            }
        }
    </style>
</head>

<body>
<div style="height:100%;padding-right: 0px; font-family: Overpass; font-size: 8pt; font-weight: 400;">
    <!--        <div style="margin-top:50px;height: 160px;">-->
    <!--            <div style="width: 80%;height: 160px;float: left;">-->
    <!--               <img style="width:63px;height:63px" src=""></img>-->
    <!--            </div>-->
    <div id="customerInfoFirst">
        <div class="right_top_detail_important">${company}</div>
        <div class="right_top_detail"><div>${street}</div><div>${city}${province}</div>${country}</div>
        <div class="right_top_detail"><div><span class="right_top_detail_important">t</span> +${areaCode} ${telephone}</div><span class="right_top_detail_important">f</span> +${faxAreaCode} ${faxNumber}</div>
        <div class="right_top_detail">info@lotuscars.nl <div class="right_top_detail_important">lotuscars.com</div></div>
    </div>
    <div id="customerInfo">
        <div style="margin-left: 80px">
            <div class="right_top_detail_important">${company}</div>
            <div class="right_top_detail"><div>${street}</div><div>${city}${province}</div>${country}</div>
            <div class="right_top_detail"><div><span class="right_top_detail_important">t</span> +${areaCode} ${telephone}</div><span class="right_top_detail_important">f</span> +${faxAreaCode} ${faxNumber}</div>
            <div class="right_top_detail">info@lotuscars.nl <div class="right_top_detail_important">lotuscars.com</div></div>
        </div>
        <div id="tableTitleRight">
            <div>QUANTITY</div>
            <div>SUBTOTAL</div>
        </div>
    </div>
    <!--         </div>-->
    <div class="invoice_title">${title}</div>
    <div>
        <div class="invoice_list" style="margin-top: 10px;" >
            <div class="invoice_list_col">
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">Customer name</div>
                    <div class="invoice_list_item_value">${customerName}</div>
                </div>
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">Customer Address</div>
                    <div class="invoice_list_item_value">${customerAddress}</div>
                </div>
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">Customer no.</div>
                    <div class="invoice_list_item_value">${customerNo}</div>
                </div>
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">Customer VAT</div>
                    <div class="invoice_list_item_value">${customerVat}</div>
                </div>
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">License plate</div>
                    <div class="invoice_list_item_value"></div>
                </div>
            </div>
            <div class="invoice_list_col">
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">Invoice no.</div>
                    <div class="invoice_list_item_value">${invoiceNo}</div>
                </div>
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">Invoice date</div>
                    <div class="invoice_list_item_value">${invoiceDate}</div>
                </div>
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">Payment date</div>
                    <div class="invoice_list_item_value">${paymentDate}</div>
                </div>
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">Payment type</div>
                    <div class="invoice_list_item_value">${paymentType}</div>
                </div>
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">Your reference</div>
                    <div class="invoice_list_item_value">${yourReference}</div>
                </div>
            </div>
        </div>
        <div id="tableTitleLeft">
            <span class="invoice_title" style="padding-bottom: 20px">${title}</span>
            <div class="tableTitleLeft_div">
                <div>SERVICE TYPE</div>
                <div>VIN</div>
                <div><div>PRICE PER PIECE<div>EX. VAT</div></div></div>
                <div>VAT RATE</div>
                <div>VAT AMOUNT</div>
            </div>
        </div>
        <div style="margin-top: 60px;padding-right: 28px;">
            <table class="table">
                <tr class="table_title" >
                    <th>SERVICE TYPE</th>
                    <th>VIN</th>
                    <th>PRICE PER PIECE<div>EX. VAT</div></th>
                    <th>VAT RATE</th>
                    <th>VAT AMOUNT</th>
                    <th>QUANTITY</th>
                    <th>SUBTOTAL</th>
                </tr>
                <tr class="table_value" style="height: 40px;">
                    <td class="table-tr-frist" style="padding-left: 7px;">${type?html}</td>
                    <td>${vin}</td>
                    <td>${priceExVat}</td>
                    <td>${vatRate}%</td>
                    <td>${vatAmount}</td>
                    <td>1</td>
                    <td>${totalInclVat}</td>
                </tr>
                <!-- <tr class="table_value" style="height: 40px;">
                  <td>Lotus EMIRA First Edition - Deposit</td>
                  <td>~</td>
                  <td>€ 2.066,12</td>
                  <td>21%</td>
                  <td>€ 433,88</td>
                  <td>1</td>
                  <td>€2.500,00</td>
              </tr>  -->
            </table>
        </div>
        <div style="border-right: 33px solid transparent; box-sizing: border-box;width: 100%;height: 200px;">
            <div class="table_footer">
                <div style="height:30px;margin-bottom: 10px;margin-top: 10px;vertical-align: text-top;">
                    <div class="table_sub_title"><div>TOTAL </div>EX.VAT</div>
                    <div class="table_sub_value">${priceExVat}</div>
                </div>
                <div style="height:30px">
                    <div class="table_sub_title"><div>TOTAL</div>VAT</div>
                    <div class="table_sub_value">${totalVat}</div>
                </div>
                <div style="height:2px;background:#FFF101;margin: 5px 0;"></div>
                <div style="height:30px; margin-top: 6px;">
                    <div class="table_sub_title"><div>TOTAL </div>INCL. VAT</div>
                    <div class="table_sub_value">${totalInclVat}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom_text">
        If you have any questions regarding this invoice please contact us via email: customerservice@lotus-hub.com
    </div>
</div>
</body>

</html>
